<template>
  <div class="common-layout">
    <el-card class="box-card operate-container" shadow="always">
      <div>
        <el-link :underline="false" icon="Search">筛选搜索</el-link>
        <el-button type="primary" icon="Search" @click="queryPage" style="float: right">查 询</el-button>
        <el-button class="button" style="float: right;margin-right: 15px">重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="queryPageReq">
          <el-form-item label="输入搜索:" label-width="140px">
            <el-input v-model="queryPageReq.keyword" clear/>
          </el-form-item>
          <el-form-item label="商品货号:" label-width="140px">
            <el-input v-model="queryPageReq.productSn" clear/>
          </el-form-item>
          <el-form-item label="商品分类:" label-width="140px">
            <el-cascader
                v-model="queryPageReq.productCategoryId"
                :options="productCategoryList"
                :props="cascaderProps"
                style="width: 196.4px;"
                clearable
            />
          </el-form-item>
          <el-form-item label="商品品牌:" label-width="140px">
            <el-select v-model="queryPageReq.brandId" placeholder="全部" style="width: 196.4px;" clearable >
              <el-option
                  v-for="item in brandList"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态:" label-width="140px">
            <el-select v-model="queryPageReq.publishStatus" placeholder="全部" style="width: 196.4px;" clearable >
              <el-option label="是" :value="1"/>
              <el-option label="否" :value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态:" label-width="140px">
            <el-select v-model="queryPageReq.verifyStatus" placeholder="全部" style="width: 196.4px;" clearable>
              <el-option label="审核通过" :value="1"/>
              <el-option label="未审核" :value="0"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card operate-container" shadow="always">
      <el-row>
        <el-col :span="12" style="text-align: left">
          <el-link :underline="false" icon="Document">数据列表</el-link>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" icon="Plus">新 增</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table-container">
      <el-table :data="productList" border style="width: 100%">
        <el-table-column prop="id" label="编号" align="center"/>
        <el-table-column prop="pic" label="商品图片" align="center">
          <template #default="scope">
            <el-image style="height: 80px;" :src="scope.row.pic"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center">
          <template #default="scope">
            <p>{{ scope.row.name }}</p>
            <p>品牌：{{ scope.row.brandName }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="价格/货号" align="center">
          <template #default="scope">
            <p>价格：￥{{ scope.row.originalPrice }}</p>
            <p>货号：{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="标签" align="center">
          <template #default="scope">
            <p>上架：
              <el-switch v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0"/>
            </p>
            <p>新品：
              <el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0"/>
            </p>
            <p>推荐：
              <el-switch v-model="scope.row.recommandStatus" :active-value="1" :inactive-value="0"/>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center"/>
        <el-table-column prop="stock" label="SKU库存" align="center">
          <el-button type="primary" icon="Edit" :circle="true" size="large"/>
        </el-table-column>
        <el-table-column prop="sale" label="销量" align="center"/>
        <el-table-column prop="verifyStatus" label="审核状态" align="center">
          <template #default="scope">
            <p>{{ scope.row.verifyStatus === 0 ? '未审核' : '审核通过' }} </p>
            <p>
              <el-link type="primary">审核详情</el-link>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <p><el-button :text="true" size="small" type="primary">编辑</el-button></p>
            <p><el-button :text="true" size="small" type="warning">删除</el-button></p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          background
          v-model:currentPage="queryPageReq.pageNum"
          v-model:page-size="queryPageReq.pageSize"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref} from 'vue'
import {withChildrenApi} from '../../../request/api/product/productCategory'
import {brandListAllApi} from '../../../request/api/brand'
import {getProductListApi} from '../../../request/api/product/product'

const state = reactive<{
  queryPageReq: ProductQueryPageParam
  pageSizes: number[],
  totalCount: number,
  productCategoryList: ProductCategory[],
  brandList: BrandObjItf[],
  productList: ProductObjItf[]
}>({
  queryPageReq: {
    pageNum: 1,
    pageSize: 10
  },
  pageSizes: [5, 10, 15, 20],
  totalCount: 10,
  productCategoryList: [],
  brandList: [],
  productList: []
});

const {queryPageReq, pageSizes, totalCount, productCategoryList, brandList, productList} = toRefs(state)

const cascaderProps = {
  label: 'name',
  value: 'id',
  children: 'children'
}

const withChildren = () => {
  withChildrenApi().then(res => {
    if (res.code === 200) {
      productCategoryList.value = res.data
    }
  })
}
const brandListAll = () => {
  brandListAllApi().then(res => {
    if (res.code === 200) {
      brandList.value = res.data
    }
  })
}

const queryPage = () => {
  getProductListApi(queryPageReq.value).then(res => {
    if (res.code === 200) {
      productList.value = res.data.list
      totalCount.value = res.data.total
    }
  })
}

withChildren()
brandListAll()
queryPage()


// 修改每页条数
const handleSizeChange = (data: number) => {
  queryPageReq.value.pageSize = data
  queryPage()
}

// 修改当前页
const handleCurrentChange = (data: number) => {
  queryPageReq.value.pageNum = data
  queryPage()
}
</script>

<style lang="less" scoped>
</style>
